<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var names = ["abc", "cba", undefined, "nba", "mba"]


    // 1.数组的解构
    // var name1 = names[0]
    // var name2 = names[1]
    // var name3 = names[2]
    // 1.1. 基本使用
    // var [name1, name2, name3] = names
    // console.log(name1, name2, name3)

    // 1.2. 顺序问题: 严格的顺序
    // var [name1, , name3] = names
    // console.log(name1, name3)

    // 1.3. 解构出数组
    // var [name1, name2, ...newNames] = names
    // console.log(name1, name2, newNames)

    // 1.4. 解构的默认值
    var [name1, name2, name3 = "default"] = names
    console.log(name1, name2, name3)


    // 2.对象的解构
    var obj = { name: "why", age: 18, height: 1.88 }
    // var name = obj.name
    // var age = obj.age
    // var height = obj.height
    // 2.1. 基本使用
    // var { name, age, height } = obj
    // console.log(name, age, height)

    // 2.2. 顺序问题: 对象的解构是没有顺序, 根据key解构
    // var { height, name, age } = obj
    // console.log(name, age, height)


    // 2.3. 对变量进行重命名
    // var { height: wHeight, name: wName, age: wAge } = obj
    // console.log(wName, wAge, wHeight)

    // 2.4. 默认值
    var { 
      height: wHeight, 
      name: wName, 
      age: wAge, 
      address: wAddress = "中国"
    } = obj
    console.log(wName, wAge, wHeight, wAddress)

    // 2.5. 对象的剩余内容
    var {
      name,
      age,
      ...newObj
    } = obj
    console.log(newObj)


    // 应用: 在函数中(其他类似的地方)
    function getPosition({ x, y }) {
      console.log(x, y)
    }

    getPosition({ x: 10, y: 20 })
    getPosition({ x: 25, y: 35 })

    function foo(num) {}

    foo(123)

  </script>

</body>
</html>